<template>
  <div class="tournament_list">
    <nut-navbar class="navbar" z-index="5" :clickable="false" fixed safe-area-inset-top>
      <template #content>
        <span>多人奖金赛</span>
      </template>
      <template #left>
        <img src="/imgs/club/arrow_left.png" alt="" @click="router.go(-1)" class="arrow_left" />
      </template>
      <template #right>
        <!-- <span @click="onSubmitCreate" class="save">保存</span> -->
      </template>
    </nut-navbar>
    <nut-tabs @change="tabChange" v-model="state.agentId" title-scroll title-gutter="10" v-if="gameTabList">
      <nut-tab-pane :title="item.name" :pane-key="item.id" v-for="item in gameTabList" :key="item.id">
        <template v-if="item.id === 1">
          <!-- 轮播 -->
          <nut-swiper
            :init-page="0"
            :auto-play="3000"
            pagination-visible
            pagination-color="#426543"
            pagination-unselected-color="#808080"
            style="height: 124px"
            >
            <nut-swiper-item v-for="(item, index) in list" :key="index">
              <img :src="item" alt="" class="imgs" draggable="false" />
            </nut-swiper-item>
          </nut-swiper>
          <!-- 比赛信息 -->
          <TournamentCard :tournaments="tournamentList" />
          <!-- 结果信息 -->
          <InfoCard />
          <!-- 富文内容 -->
          <RichTextContent />
        </template>
        <template v-if="item.id === 2">
          <!-- 排行榜 -->
          <TankingTable />
        </template>
        <template v-if="item.id === 3">
          <!-- 盲注 -->
          <BetTable />
        </template>
      </nut-tab-pane>
    </nut-tabs>
    <!-- 分享按钮 -->
    <div class="share_button"  @click="visible = true">
      <span>分享</span>
    </div>
    <!-- 分享弹窗 -->
    <shareModal v-model:visible="visible"></shareModal>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import {  useRouter } from "vue-router";
const router = useRouter();

import TournamentCard from "../components/tournamentCard.vue";
import InfoCard from "../components/infoCard.vue";
import RichTextContent from "../components/richTextContent.vue";
import TankingTable from "../components/rankingTable.vue";
import BetTable from "../components/betTable.vue";
import shareModal from '../components/shareModal.vue'

const state = reactive({
  // 1为简介
  agentId: 1,
})

const visible = ref(false)

const gameTabList = reactive([
  {
    id: 1,
    name: "简介",
  },
  {
    id: 2,
    name: "排行榜",
  },
  {
    id: 3,
    name: "盲注",
  }
]);

const list = ref([
  'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
  'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
  'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
  'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
])

// 赛事列表数据
const tournamentList = ref([
  // {
  //   round: "5张奥马哈", // 比赛回合
  //   prize: "$12,500,09", // 奖金
  //   name: "赛事IGO+·赛事名称", // 比赛名称
  //   startTime: new Date(new Date().getTime() + 8 * 60 * 60 * 1000).toISOString(), // 开始时间：8小时后
  //   buyIn: "免费", // 买入
  //   status: 0, // 比赛状态
  //   people: 1999, // 参赛人数
  //   time: '', // 倒计时目标时间
  //   remainingTime: '', // 倒计时剩余时间
  //   remainingTimeType: '', // 倒计时类型
  // },
  // {
  //   round: "6张奥马哈",
  //   prize: "$12,500,09",
  //   name: "赛事IGO+·赛事名称",
  //   startTime: new Date(new Date().getTime() + 4 * 60 * 60 * 1000).toISOString(), // 开始时间：4小时后
  //   buyIn: "免费",
  //   status: 0,
  //   people: 1999,
  //   time: '', // 倒计时目标时间
  //   remainingTime: '', // 倒计时剩余时间
  //   remainingTimeType: '', // 倒计时类型
  // },
  // {
  //   round: "奥马哈",
  //   prize: "$12,500,09",
  //   name: "赛事IGO+·赛事名称",
  //   startTime: new Date(new Date().getTime() - 10 * 60 * 1000).toISOString(), // 开始时间：10分钟前
  //   buyIn: "免费",
  //   status: 2,
  //   people: 1200,
  //   time: '', // 倒计时目标时间
  //   remainingTime: '', // 倒计时剩余时间
  //   remainingTimeType: '', // 倒计时类型
  // },
  {
    round: "5张奥马哈",
    prize: "$12,500,09",
    name: "赛事IGO+·赛事名称",
    startTime: new Date(new Date().getTime() - 25 * 60 * 1000).toISOString(), // 开始时间：25分钟前
    buyIn: "免费",
    status: 4,
    people: 800,
    time: '', // 倒计时目标时间
    remainingTime: '', // 倒计时剩余时间
    remainingTimeType: '', // 倒计时类型
  },
  // {
  //   round: "6张奥马哈",
  //   prize: "$12,500,09",
  //   name: "赛事IGO+·赛事名称",
  //   startTime: new Date(new Date().getTime() - 2 * 60 * 60 * 1000).toISOString(), // 开始时间：2小时前
  //   buyIn: "免费",
  //   status: 3,
  //   people: 500,
  //   time: '', // 倒计时目标时间
  //   remainingTime: '', // 倒计时剩余时间
  //   remainingTimeType: '', // 倒计时类型
  // },
  // {
  //   round: "奥马哈",
  //   prize: "$12,500,09",
  //   name: "赛事IGO+·赛事名称",
  //   startTime: new Date(new Date().getTime() - 6 * 60 * 60 * 1000).toISOString(), // 开始时间：6小时前
  //   buyIn: "免费",
  //   status: 5,
  //   people: 0,
  //   time: '', // 倒计时目标时间
  //   remainingTime: '', // 倒计时剩余时间
  //   remainingTimeType: '', // 倒计时类型
  // },
]);

const tabChange = (item: any) => {
  console.log('item', item)
}
</script>

<style scoped lang="scss">
.tournament_list {
  .arrow_left {
    width: 24px;
    height: 24px;
  }
  
  .imgs{
    height: 124px;
    width: 347px;
    
  }
  :deep(.nut-swiper) {
    width: 347px;
    border-radius: 8px;
    margin: 0 auto 10px;
  }

  :deep(.nut-tabs__titles) {
    height: 36px;
  }

  // 分享按钮样式
  .share_button {
    position: fixed;
    bottom: 40px;
    left: 50%; 
    transform: translateX(-50%);
    z-index: 99px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 319px;
    height: 44px;
    margin: 0 auto;
    border-radius: 8px;
    background: linear-gradient(180deg, #5567FF 0%, #9E1EFF 100%);
    box-shadow: 0.5px 0.5px 1px 0px #9B9EFF inset;

    span {
      color: #FFF;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
    }
  }
}
</style>
